<template>
  <div class="login-page">
    <div class="login-container" v-show="!anyDialogOpen">
      <div class="login-header">
        <img src="/logo.jpg" class="logo" alt="WuWaManus" />
        <h1 class="title">WuWaManus</h1>
        <p class="subtitle">AI《鸣潮》游戏攻略智能体</p>
      </div>

      <div class="login-form">
        <div class="form-group">
          <label class="form-label">账号</label>
          <input 
            v-model="form.userAccount" 
            type="text" 
            class="form-input" 
            placeholder="请输入账号"
            :disabled="loading"
          />
        </div>

        <div class="form-group">
          <label class="form-label">密码</label>
          <input 
            v-model="form.userPassword" 
            type="password" 
            class="form-input" 
            placeholder="请输入密码"
            :disabled="loading"
            @keydown.enter="handleLogin"
          />
        </div>

        <button 
          class="login-btn" 
          :disabled="!canLogin || loading" 
          @click="handleLogin"
        >
          <span v-if="loading">登录中...</span>
          <span v-else>登录</span>
        </button>

        <div class="form-links">
          <button class="link-btn" @click="showRegister = true">注册账号</button>
          <!-- <button class="link-btn" @click="showReset = true">忘记密码</button> -->
        </div>
      </div>
    </div>

    <!-- 注册弹窗 -->
    <RegisterDialog 
      v-if="showRegister"
      :visible="showRegister" 
      @close="showRegister = false"
      @success="onRegisterSuccess"
    />

    <!-- 重置密码弹窗 -->
    <!-- <ResetPasswordDialog 
      v-if="showReset"
      :visible="showReset" 
      @close="showReset = false"
      @success="onResetSuccess"
    /> -->
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/user';
import RegisterDialog from '../components/RegisterDialog.vue';
import ResetPasswordDialog from '../components/ResetPasswordDialog.vue';

const router = useRouter();
const userStore = useUserStore();

const loading = ref(false);
const showRegister = ref(false);
const showReset = ref(false);

const form = ref({
  userAccount: '',
  userPassword: ''
});

const canLogin = computed(() => form.value.userAccount.trim() && form.value.userPassword.trim());
const anyDialogOpen = computed(() => showRegister.value || showReset.value);

// 确保同时只有一个对话框显示
watch(showRegister, (newVal) => { if (newVal) showReset.value = false; });
watch(showReset, (newVal) => { if (newVal) showRegister.value = false; });

async function handleLogin() {
  if (!canLogin.value || loading.value) return;
  loading.value = true;
  try {
    await userStore.login(form.value);
    router.push('/');
  } catch (error) {
    console.error('登录失败:', error);
    alert(error.message || '登录失败，请检查账号密码');
  } finally { loading.value = false; }
}

function onRegisterSuccess() { showRegister.value = false; alert('注册成功，请登录'); }
function onResetSuccess() { showReset.value = false; alert('密码重置成功，请重新登录'); }
</script>

<style scoped>
.login-page { min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: grid; place-items: center; padding: 20px; }
.login-container { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.1); padding: 48px; width: 100%; max-width: 400px; }
.login-header { text-align: center; margin-bottom: 32px; }
.logo { width: 48px; height: 48px; border-radius: 50%; margin-bottom: 16px; }
.title { font-size: 24px; font-weight: 700; color: #1f2937; margin: 0 0 8px; }
.subtitle { font-size: 14px; color: #6b7280; margin: 0; }
.login-form { display: grid; gap: 20px; }
.form-group { display: grid; gap: 8px; }
.form-label { font-size: 14px; font-weight: 600; color: #374151; }
.form-input { padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
.form-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
.form-input:disabled { background: #f9fafb; color: #6b7280; }
.login-btn { padding: 12px 24px; background: #3b82f6; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
.login-btn:hover:not(:disabled) { background: #2563eb; }
.login-btn:disabled { background: #9ca3af; cursor: not-allowed; }
.form-links { display: flex; justify-content: space-between; margin-top: 8px; }
.link-btn { background: none; border: none; color: #3b82f6; font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background-color 0.2s; }
.link-btn:hover { background: #f3f4f6; }
</style>
